<template>
  <!-- {{recommendList}} -->
  <div class="recommend-list-wrapper">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <template v-for="recommendItem in list" :key="recommendItem.id">
        <div class="recommend-list-item-box">
          <div class="recommend-list-item-title">{{ recommendItem.title }}</div>
          <div class="recommend-list-item-imgs-box">
            <template v-for="imgs in recommendItem.imgs" :key="imgs.id">
              <!-- <div>{{imgs.img}}</div> -->
              <van-image
                :src="imgs.img"
                lazy-load
                icon-size="30.13vw"
                fit="fill"
                width="30.13vw"
                height="22.4vw"
              >
              </van-image>
            </template>
          </div>
          <div class="recommend-list-item-radio">
            <!-- {{recommendItem.radio}} -->
          </div>
        </div>
      </template>
    </van-list>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  props: ["recommendList"],
  setup(props) {
    const list = ref([]);
    const loading = ref(false);
    const finished = ref(false);
    const count=ref(0)
    const {recommendList}=props
     const onLoad = () => {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      
     setTimeout(() => {
        if (10 + count.value >= recommendList.length) {
          for (let i = count.value; i < recommendList.length; i++) {
            list.value.push(recommendList[i]);
          }
          count.value = recommendList.length - 1;
          loading.value = false;
          finished.value = true;
        } else {
          for (let i = count.value; i < 10 + count.value; i++) {
            list.value.push(recommendList[i]);
          }
          count.value += 10;
          // 加载状态结束
          loading.value = false;
        }
      }, 500);
      // }
    };
    return {
       list,
      onLoad,
      loading,
      finished,
      recommendList,
      count
    };
  },
};
</script>

<style lang="scss">
.recommend-list-wrapper {
  .recommend-list-item-box {
    width: 100%;
    padding-top: 12vw/375 * 100;
    .recommend-list-item-title {
      font-size: 16vw/375 * 100;
      color: #1f2129;
    }
    .recommend-list-item-imgs-box {
      display: flex;
      justify-content: space-around;
    }
  }
}
</style>